import React, { useState } from 'react';
import { Link } from 'react-router-dom'
import { renderRoutes } from 'react-router-config';
import './TabbleBar.css'
import { connect } from 'react-redux';
import { actionCreators } from '../../pages/Main/store';
// import {Toast} from 'vant-react'
import MainPopup from '../mainPopup/MainPopup';
const TableBar = (props) => {
    let { route, index, } = props;
    const { setIndexDispatch: changeIndex } = props
    const { routes } = route;
    const [showPopup, setShowPopup] = useState(false)
    const [display, setDisplay] = useState(false)
    const handleOnClick = () => {
        setShowPopup(!showPopup)
    }
    return (
        <>
            {renderRoutes(route.routes)}
            <div className="ul-test">
                <ul className="Botton-warper">
                    <li
                        onClick={() => { changeIndex(0) }}
                        className="Botton-warper-warp"
                        key="1">
                        <Link to="/home/main"
                            style={{ textDecoration: "none" }}>
                            <div>
                                <div className="icon" style={
                                    index === 0
                                        ? { backgroundPosition: "0rem -3.4133rem" }
                                        : { backgroundPosition: "0rem 0rem" }
                                }></div>
                                <div
                                    className="planet">首页</div>
                            </div>
                        </Link>
                    </li>
                    <li
                        onClick={() => { changeIndex(1) }}
                        className="Botton-warper-warp"
                        key="2"
                    >
                        <Link to='/home/cart' style={{ textDecoration: "none" }}>
                            {/* style={{ backgroundPosition: "-39.4922px 0rem" }} */}
                            <div className="icon" style={
                                index === 1
                                    ? { backgroundPosition: "0rem -4.2667rem" }
                                    : { backgroundPosition: "0rem  -0.8533rem" }
                            }></div>
                            <div className="planet" >
                                购物车
                            </div>
                        </Link>
                    </li>
                    <li
                        className="Botton-warper-warp"
                        key="3"
                        onClick={() => { changeIndex(2) }}
                    >
                        <Link to='/home/my' style={{ textDecoration: "none" }}>
                            {/* style={{backgroundPosition:"-3.968rem 0rem"}} */}
                            <div className="icon" style={
                                index === 2
                                    ? { backgroundPosition: "0rem -5.12rem" }
                                    : { backgroundPosition: "0rem -1.7067rem" }
                            }> </div>
                            <div className="planet" >
                                我的
                            </div>
                        </Link>

                    </li>
                    <li
                        className="Botton-warper-warp"
                        key="4"
                        onClick={ ()=>{handleOnClick()}}
                    >
                        <div className="icon" style={
                            index === 3
                                ? { backgroundPosition: "0rem -5.9733rem" }
                                : { backgroundPosition: "0rem  -2.56rem" }
                        }>
                        </div>
                        <div className="planet">
                            更多
                        </div>
                        {/* </Link> */}
                    </li>
                </ul>
            </div>
            <MainPopup handleOnClick={handleOnClick} display={showPopup}></MainPopup>
        </>
    )
}
const mapStateToProps = (state) => {
    return {
        index: state.main.index
    }
}

const mapStateToDispatch = (dispatch) => {
    return {
        setIndexDispatch(index) {
            dispatch(actionCreators.setIndex(index))
        }
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(TableBar)